<template>
  <div class="block" :style="{ height: `${statusBarHeight}px` }"></div>
  <div class="navigation" :style="{ height: `${barHeight}px`, 'line-height': `${barHeight}px` }">
    <div class="return" @click="handleReturn" v-if="return">
      <img src="/static/icon/return.svg" alt="" />
    </div>
    <div class="title">{{ title || '青椒人社通' }}</div>
  </div>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const props = defineProps({
  title: {
    type: String,
  },
  return: {
    type: Boolean,
    default: true,
  },
})
const handleReturn = () => {
  uni.navigateBack({
    delta: 1,
  })
}
const statusBarHeight = ref(0)
const barHeight = ref(0)
onLoad(() => {  
  statusBarHeight.value = wx.getWindowInfo().statusBarHeight
  const { top, height } = wx.getMenuButtonBoundingClientRect()  
  barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38
})
</script>
<style scoped lang="scss">
.navigation {
  width: 100%;
  position: relative;
  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 34rpx;
    color: #000;
  }
  .return {
    position: absolute;
    left: 32rpx;
    top: 50%;
    width: 24rpx;
    height: 48rpx;
    transform: translateY(-50%);
  }
}
</style>
